<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://qzone.qq.com/1678513665/page" prefix="w"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="css/details.css?id=<%=new Date().getTime()%>" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

	$(function() {
		$(".card_style_one").empty();
		/* qqq(0); */
		//
		$("#jia").click(function() {
			var num = parseInt($("#num").val());
			if (num > 50) {
				$("#num").val("50");
				return;
			}
			if (num < 50) {

				$("#num").val(num + 1);

			} else {
				alert("库存不足")
			}
		})
		//
		$("#jian").click(function() {
			var num = parseInt($("#num").val());
			if (num == 0) {
				$("#num").val("1");
				return;
			}
			if (num > 1) {
				$("#num").val(num - 1);
			} else {
				alert("该商品最少买一件")
			}
		})
		//
		$(".details-img1:eq(0)").css("display", "block");
		$(".details-img2:eq(0)").css("border", "1px solid #b4a078");
		//
		$(".details-img2").mouseover(
				function() {
					var index = $(".details-img2").index(this);
					$(this).css("border", "1px solid #b4a078");
					$(".details-img2").eq(index).siblings().css("border",
							"1px solid #e8e8e8")
					$(".details-img1").eq(index).css("display", "block");

					$(".details-img1").eq(index).siblings().css("display",
							"none")
					var p = $(".details-img2:eq(" + index + ") img")
							.attr("src");
					$(".img5").eq(index).attr("src", p)
				})
		//
		$(".details-img3").click(function() {
					var index = $(".details-img3").index(this);
					$(this).css("border", "1px solid #b4a078");
					$(".details-img3").eq(index).siblings().css("border",
							"1px solid #e8e8e8");
					var s = $(".img4").eq(index).attr("src");
					$(".img5").attr("src", s);
					$("#cart_img").val(s);

		})
		//
			$(".typeg").click(function(){
				var s =$(this).html();
				var ss=$("#carttypega").val(s)
			})
				//		
				
				
				$(".typeg").click(function(){
					var tpindex = $(".typeg").index(this);
					$(".typeg:eq("+tpindex+")").css("border","1px solid #9d8863");
					$(".typeg:eq("+tpindex+")").siblings().css("border","1px solid #d8d8d8");
				})
	});
	
	
</script>
</head>
<body>
	<%@ include file="Header.jsp"%>
	<form action="addCart.shtml" id="form2">
	<div class="details-style-width" class="clear">
		<div class="details-style-width-ern"
			style="margin-top: 6px; padding-top: 20px; padding-bottom: 35px; box-sizing: border:box;"
			class="clear">
			<div>
				<div style="height: 25px;"></div>
				<div class="clear">
					<div class="left">
						<div
							style="width: 386px; border: 1px solid #e8e8e8; float: left; margin-right: 25px;">
							<c:forTokens items="${goodsType2.shangping.bigimg }" delims=","
								var="s">
								<p class="details-img1" style="display: none;">
									<img src="images/detali/${s }" width="100%" class="img5" />
								</p>
							</c:forTokens>
						</div>
						<div class="left">
							<c:forTokens items="${goodsType2.shangping.bigimg }" delims=","
								var="s">
								<p
									style="border: 1px solid #e8e8e8; width: 70px; margin-bottom: 10px; padding: 4px; box-sizing: border-box;"
									class="details-img2">
									<img src="images/detali/${s }" width="60px" class="img6" />
								</p>
							</c:forTokens>
						</div>
					</div>
					<div class="left" style="margin-left: 40px;">
						<div>
							<p style="font-size: 16px; font-family: inherit;">${goodsType2.shangping.shopname }</p>
							<p
								style="font-size: 12px; margin-top: 12px; font-family: inherit;">
								${goodsType2.shangping.jieshao }</p>
						</div>
						<div
							style="width: 380px; border: 1px dashed #e8e8e8; padding: 10px; box-sizing: border-box; background-color: rgba(230, 230, 230, 0.5); margin-top: 12px;"
							class="details-one">
							<p>
								<span>价格：</span> <span
									style="margin-left: 2px; color: red; letter-spacing: 0.1em; font-size: 16px;">￥${goodsType2.shangping.sjiage }</span>
								<span style="margin-left: 140px;">用户评论:</span> <span>${goodsType2.shangping.commentcount }</span>
							</p>
							<p style="margin-top: 10px;">
								<span>限制</span><span style="margin-left: 16px;">爱迪生噶还是地方阿斯蒂芬</span>
							</p>
							<p>
								<span>积分</span><span style="margin-left: 16px;">购买最高获得${goodsType2.shangping.jifen }积分</span>
							</p>
							<p style="border: 1px dashed #d3d1d1;"></p>
							<p>
								<span>服务</span><span style="margin-left: 16px;">撒地方撒地方</span>
							</p>
						</div>
						<div>
							<c:forTokens items="${goodsType2.typegg.tgname }" delims=","
								var="tgname" varStatus="tgnameid">

								<div style="width: 350px; margin-top: 10px;" class="clear">
									<div style="float: left; margin-top: 14px;">${tgname }</div>
									<div style="float: left; margin-left: 14px; width: 270px;">
										<c:if test="${tgname eq'尺码' }">
											<c:forTokens items="${goodsType2.spgvalues }" delims=","
												var="s" varStatus="sid">

												<p
													style="width: 120px; height: 25px; line-height: 25px; text-align: center; border: 1px solid #d8d8d8; float: left; margin-left: 10px; margin-top: 10px;" class="typeg">
													${s }</p>


											</c:forTokens>
										</c:if>
										
										<c:if test="${tgname eq'颜色' }">
											<c:forTokens items="${goodsType2.spgvalues2 }" delims=","
												var="ss">
												<p
													style="width: 50px; height: 50px; text-align: center; border: 1px solid #d8d8d8; float: left; margin-left: 10px; margin-top: 10px; background-color: #e8e8e8; padding: 4px; box-sizing: border-box;"
													class="details-img3">
													<img src="images/detali/${ss }" width="100%" class="img4" />
												</p>
											</c:forTokens>
										</c:if>
										
									</div>
								</div>
							</c:forTokens>
							<input type="text" name="carttypeg" id="carttypega" />
							<input type="text" name="sid" id="sid" value="${goodsType2.sid}" />
							<input type="text" name="cart_img" id="cart_img" />
							<!-- <div style="margin-top: 16px;" class="clear">
								<div style="float: left; margin-top: 25px;">颜色</div>
								<div style="float: left; margin-left: 14px; width: 270px;">
									<p
										style="width: 50px; height: 46px; text-align: center; border: 1px solid red; float: left; margin-left: 10px; margin-top: 10px;">

									</p>
								</div>
							</div> -->
							<div style="margin-top: 20px;">
								<span>数量</span><span style="margin-left: 16px;">
									<button
										style="padding: 6px; width: 30px; box-sizing: border-box; text-align: center;"
										id="jia" type="button">+</button> <input type="text" name="num" id="num"
									value="1"
									style="height: 25px; width: 45px; text-align: center; border-left: 0px; border-right: 0px; border-top: 1px solid #979797; border-bottom: 1px solid #979797" />
									<button
										style="padding: 6px; width: 30px; box-sizing: border-box; text-align: center;"
										id="jian" type="button">-</button>
								</span>
							</div>
							<div class="clear" style="margin-top: 16px;">
								<div
									style="width: 140px; border: 1px solid #c6b368; height: 40px; line-height: 40px; text-align: center; background-color: #f5f3ef; border-radius: 2px; float: left"
									class="goumai001">立即购买</div>
								<div>
									<div
										style="width: 140px; border: 1px solid #c6b368; height: 40px; line-height: 40px; text-align: center; background-color: #b4a078; border-radius: 2px; float: left; margin-left: 16px;" class="add_card">
										加入购物车</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div></div>
			<div></div>
		</div>
	</div>
	</form>
	<div style="height: 600px;"></div>
</body>
</html>